<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="200" height="100" viewBox="-10 -5 110 55">
	
	<!-- Matthew Bystedt http://pike.port5.com 2003 -->
	
	<!-- Pattern Definition -->
	<defs>
		<pattern id="rulerPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" viewBox="0 0 10 10">
				
			<line x1="0" y1="0" x2="10" y2="0" stroke="lightblue" fill="none" stroke-dasharray="2,2"/>
			<line x1="0" y1="0" x2="0" y2="10" stroke="lightblue" fill="none" stroke-dasharray="2,2"/>
		</pattern>
        
        <g id="example">
            <rect width="20" height="20" opacity="0.8" stroke="black"/>
        </g>
	</defs>

	<!-- Background -->
	<rect x="-10" y="-5" width="100%" height="100%" fill="url(#rulerPattern)" stroke="black"/>

	<!-- Translate then rotate -->
    
    <use xlink:href="#example" fill="red"/>
    <g transform="translate(15, 15)" fill="yellow">
        <use xlink:href="#example"/>
        <g transform="rotate(30)" fill="green">
            <use xlink:href="#example"/>
        </g>
    </g>
    
	<!-- Rotate then translate -->

    <g transform="translate(70)">
    <use xlink:href="#example" fill="red"/>
    <g transform="rotate(30)" fill="yellow">
        <use xlink:href="#example"/>
        <g transform="translate(15, 15)" fill="green">
            <use xlink:href="#example"/>
        </g>
    </g>
    </g>
</svg>